<template>
  <div class="permit-container">
    <div class="permit-content">
      <div class="permit-head">签发信息</div>
      <div class="permit-card">
        <div class="permit-item" v-for="item in options" :key="item.prop">
          <div class="permit-label">{{ item.name }}：</div>
          <!-- 进度条 -->
          <div class="permit-span permit-progress" v-if="item.type === 'progress'">
            <div class="permit-progress-icon">
              <a-progress :percent="getPercent(formData[item.prop], formData[item.total])" :show-info="false" />
            </div>
            <div class="permit-progress-number">{{ formData[item.prop] }} / {{ formData[item.total] }}</div>
          </div>
          <!-- 标签 -->
          <div class="permit-span permit-tag" v-else-if="item.type === 'tag'">
            <a-tag v-for="(t, i) in formData[item.prop]" :key="i" :bordered="false">{{ t }}</a-tag>
          </div>
          <!-- 普通内容 -->
          <div class="permit-span" v-else>{{ formData[item.prop] }}</div>
        </div>
      </div>
    </div>
    <div class="permit-content">
      <div class="permit-head">激活方式</div>
      <div class="permit-card activation-card">
        <div class="permit-item">
          <div class="permit-label">方式1：</div>
          <div class="permit-span">
            <!-- <el-button type="primary" size="small" icon="el-icon-plus"> 上传许可证 </el-button> -->
          </div>
        </div>
        <div class="permit-item">
          <div class="permit-label">方式2：</div>
          <div class="permit-span">
            <!-- <el-input type="textarea" :rows="3" size="small"></el-input> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        options: [
          {
            name: '签发对象',
            prop: 'duixiang',
          },
          {
            name: '点位使用情况',
            prop: 'shiyongqingkuang',
            total: 'shiyongqingkuangTotal',
            type: 'progress',
          },
          {
            name: '数据处理',
            prop: 'shujuchuli',
          },
          {
            name: '签发邮箱',
            prop: 'youxiang',
          },
          {
            name: '签发时间',
            prop: 'qianfashijian',
          },
          {
            name: '过期时间',
            prop: 'guoqishijian',
          },
          {
            name: '硬件标识',
            prop: 'biaoshi',
          },
          {
            name: '可用插件',
            prop: 'chajian',
            type: 'tag',
          },
        ],
        formData: {
          duixiang: '浙江欣挪瑞海洋科技有限公司',
          shiyongqingkuang: 3,
          shiyongqingkuangTotal: 30,
          shujuchuli: '仅测试使用，「规则」每运行 60 分钟将自动停止',
          youxiang: 'support@xxx.io',
          qianfashijian: '2024-06-24',
          guoqishijian: '2025-06-24',
          biaoshi: 'TzWdveQ5ifLvtL qsCWrVWx1JgZBh+ 19ZIpf2blmWrcs=',
          chajian: [
            'ABB COMLI',
            'Allen-Bradley ControlLogix 5500',
            'Allen-Bradley DF1',
            'Allen-Bradley MicroLogix 1400',
            'BACnet/IP',
            'Beckhoff ADS',
            'CODESYS V3 TCP',
          ],
        },
      };
    },
    methods: {
      getPercent(data, total) {
        return Math.ceil((data / total) * 100);
      },
    },
  };
</script>

<style scoped>
  .permit-container {
    padding: 15px;
    background-color: #fff;
    box-shadow:
      0 1px 2px 0 rgba(0, 0, 0, 0.03),
      0 1px 6px -1px rgba(0, 0, 0, 0.02),
      0 2px 4px 0 rgba(0, 0, 0, 0.02);
    border-radius: 8px;
  }
  .permit-content {
    margin-bottom: 20px;
  }
  .permit-head {
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 700;
  }
  .permit-card {
    max-width: 700px;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px #ddd;
  }
  .permit-item {
    margin: 10px 0;
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-column-gap: 10px;
    line-height: 30px;
  }
  .permit-label {
    font-weight: 700;
    text-align: right;
  }
  .permit-span {
    color: #999;
  }
  .permit-progress {
    display: grid;
    grid-template-columns: 1fr 80px;
    justify-content: space-between;
  }
  .permit-progress-number {
    text-align: center;
  }
  .activation-card .permit-item {
    line-height: 35px;
  }
</style>
